<!doctype html>
<html>
    <head>
        <!--
        This test performs an animation of the matrix operator. The matrix is defined so that the
        decomposition (unmatrix) algorithm is tested on the path where the matrix is negated and the
        the scaling factors are also negated.
        The animation is started and a snapshot is taken after start. The "d" component of matrix
        should be negative.
        -->
        <style type="text/css" media="screen">
            #box {
                width: 100px;
                height: 100px;
                background-color: blue;
                animation-duration: 10s;
            }

            @keyframes anim {
                from { transform: matrix(1, 0, 0, -1, 0, 0); }
                to { transform: matrix(1, 0, 0, 1, 0, 0); }
            }
        </style>
        <script src="../resources/testharness.js"></script>
        <script src="../resources/testharnessreport.js"></script>
        <script type="text/javascript" charset="utf-8">
            var test = async_test("This test performs an animation of the matrix operator");

            function snapshot()
            {
                var boxComputedStyle = window.getComputedStyle(document.getElementById('box'));
                var matrix = new WebKitCSSMatrix(boxComputedStyle.transform);

                // "d" component (scaleY) should be negative.
                assert_less_than_equal(matrix["d"] , 0, "'d' component(scaleY) should be negative");

                document.getElementById('result').innerHTML = result;
            }

            function startAnimation()
            {
                document.getElementById("box").style.animationName = "anim";
            }

            document.addEventListener('webkitAnimationStart', test.step_func_done(snapshot), false);
        </script>
    </head>
    <body>
        <div id="box"></div>
        <div id="result"></div>
        <script>
            startAnimation();
        </script>
    </body>
</html>
